<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./vue.global.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #app {
                width: 100%;
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                overflow-y: auto;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <button @click="add">加法</button>
            <p>{{current}}</p>
            <input v-model="str" type="text" />
            <p>{{str}}</p>
            <input v-model="obj.name" type="text" />
            <p>{{obj.name}}</p>
        </div>
        <script>
            const { createApp, ref, reactive, computed } = Vue;

            createApp({
                data() {
                    return {
                        current: 0,
                    };
                },
                methods: {
                    add() {
                        this.current++;
                    },
                },
                beforeCreate() {
                    console.log("beforeCreate");
                },
                setup() {
                    const str = ref("哈哈");
                    const cStr = computed(() => str.value + "呵呵");
                    console.log(`output->ref`, str);
                    console.log(`output->computed`, cStr);
                    const obj = reactive({ name: "张三", age: 123 });
                    console.log(`output->reactive`, obj);
                    return {
                        str,
                        obj,
                    };
                },
            }).mount("#app");
        </script>
    </body>
</html>
